<template>
	<om-page :title="pageTitle">
		<view class="message-container">
			<view class="message-top">
				<view class="message-setting">
					<a @click="setting">设置</a>
					<a @click="screen">筛选</a>
				</view>
				<view class="screen-result" v-show="screenType">
					<view class="condition">筛选条件：我的请假</view>
					<view class="close" @click="close">X</view>
				</view>
			</view>
			<view class="message-body" :style="{'paddingTop': screenType ? '80px' : '50px'}">
				<view class="message-date"><span>2月1日 14:52</span></view>
				<view class="message-box">
					<view class="message-type-img"><image class="img" src="/static/images/others/qq.png" /></view>
					<view class="message-cont">
						<view class="message-type">考勤打卡</view>
						<view class="message-detail">
							<view class="name">考勤异常提醒</view>
							<view class="time">制表时间：2021-11-16</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup  id="popup" ref="popup" :type="'center'">
			<view class="popup-cotent padding">
				<view class="margin popup-tip">
					请选择消息模块
				</view>
				<view  class="popup-item padding" @click="messageType()">
					<text>我的请假</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view  class="popup-item padding" @click="messageType()">
					<text>考勤补签</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view  class="popup-item padding" @click="messageType()">
					<text>销假</text>
					<uni-icons :size="20" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
				</view>
				<view class="margin flex justify-end" @click="cancel">
					<a class="cancel-btn">取消</a>
				</view>
			</view>
		</uni-popup>
	</om-page>
</template>

<script>
export default {
	data() {
		return {
			pageTitle:"消息详情",
			screenType: false
		};
	},
	watch: {
	　　
	},
	methods: {
		setting(){
			uni.navigateTo({
				url: "/pages/message/message-setting"
			});
		},
		screen(){
			this.$refs.popup.open()
		},
		cancel(){
			this.$refs.popup.close()
		},
		messageType(){
			this.screenType = true
			this.$refs.popup.close()
		},
		close(){
			this.screenType = false
		}
	},
	onLoad() {
		
	},
};
</script>

<style lang="scss" scoped>
	.om-page{
		background: none;
	}
	.message-container{
		.message-top{
			position: fixed;
			top: 0;
			width: 100%;
			background: #FFF;
			.message-setting{
				height: 50px;
				border-bottom: 1px solid #c8c7cc;
				a{
					float: right;
					display: block;
					width: 68px;
					height: 26px;
					line-height: 26px;
					text-align: center;
					display: block;
					color: #0081ff;
					background-color: #cce6ff;
					margin: 12px 10px 12px 0;
				}
			}
			.screen-result{
				padding-left: 15px;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #c8c7cc;
				.condition{
					float: left;
				}
				.close{
					float: right;
					margin-right: 12px;
				}
			}
		}
		.message-body{
			.message-date{
				span{
					display: table;
					background: #FFF;
					margin: 0 auto;
					padding: 0 5px;
					border-radius: 5px;
					height: 24px;
					line-height: 24px;
				}
				margin-top: 30px;
				margin-bottom: 5px;
			}
			.message-box{
				display: flex;
				flex-direction: row;
				margin-bottom: 20px;
				.message-type-img{
					width: 36px;
					height: 36px;
					background: #FFF;
					border: 1px solid #c8c7cc;
					border-radius: 5px;
					margin: 0 15px;
					// background-color: #f0f0f0;
					.img{
						width: 36px;
						height: 36px;
					}
				}
				.message-cont{
					margin-right: 66px;
					flex: 1;
					.message-type{
						
					}
					.message-detail{
						background: #FFF;
						border: 1px solid #c8c7cc;
						border-radius: 5px;
						padding: 10px;
						width: 100%;
						.name{
							font-size: 16px;
							font-weight: bold;
						}
						.time{
							
						}
					}
				}
			}
		}
	}
	
	.popup-item{
		height:50px;
		background-color: #FFFF;
		font-size: 16px;
		text-align: center;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.popup-cotent{
		width: 300px;
		background-color: white;
		border-radius: 10px;
		overflow: auto;
		max-height: 315px;
	}
	.popup-tip{
		font-size: 16px;
		color:#b0b0b0 ;
	}
	.cancel-btn{
		text-align: center;
		display: block;
		color: #0081ff;
		background-color: #cce6ff;
		height: 36px;
		line-height: 36px;
		width: 72px;
		margin: 15px auto 0;
	}
</style>